<html>

<head>
    <title></title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.css">
    <link href="css/lc_switch.css" rel="stylesheet" />
    <script src="js/jq.js"></script>
    <script src="js/lc_switch.js" type="text/javascript"></script>
    <script src="js/jquery.cookie.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="tabby.js"></script>
</head>

<body>
    <div class="">
        <form class="search-div">
            <span>
                <input type="text" class="search-bar" placeholder="Search here...">
                <button class="search-btn"><i class="fa fa-search search-icon"></i></button>
            </span>
        </form>
        <button type="button" class="btn setting-btn" data-toggle="modal" data-target="#myModal">
            <i class="fa fa-cog setting-icon"></i>
        </button>
        <div
            id="myModal" class="modal fade" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header"><button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title"><i class="fa fa-cog settings-icon"></i>Settings</h4>
                    </div>
                    <div class="modal-body">
                        <div class="flip-switch">
                            <p class="pgh" id="pgh-hide">Do you want to hide search bar?</p>
                            <p class="pgh" id="pgh-show">Do you want to show search bar?</p><input type="checkbox" name="sample" value="1" class="lcs_check" /></div>
                    </div>
                </div>
            </div>
    </div>
    </div>
</body>

</html>